<template>
  <el-dialog title="创建即时测验" :close-on-click-modal="false" :destroy-on-close="true" width="1000px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-diglogBox">
      <div class="online-dialogCons">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item prop="testTitle" label="标题名称">
            <el-input v-model="ruleForm.testTitle" autocomplete="off" placeholder="请输入标题名称"></el-input>
          </el-form-item>
          <el-form-item prop="isLimited" label="答题限时">
            <el-radio-group v-model="ruleForm.isLimited">
              <el-radio :label="1">限时</el-radio>
              <el-radio :label="0">不限时</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="isAppraised" label="" v-if="ruleForm.isLimited===1">
            限时
            <el-input-number v-model="ruleForm.limitedTime" autocomplete="off" :min="1" style="margin: 0 15px;width: 150px;"></el-input-number>
            分钟
          </el-form-item>
          <el-form-item prop="answerAnalyseIsOpened" label="答案解析">
            <el-radio-group v-model="ruleForm.answerAnalyseIsOpened">
              <el-radio :label="1">开放</el-radio>
              <el-radio :label="0">不开放</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="subjects-title">已选题目</div>
        <el-table :data="selects" border max-height="350" style="width: 100%;margin: 10px 0;" @selection-change="handleSelectionChange">
          <el-table-column prop="date" label="题目类型" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.subject_type === '10'">单选题</span>
              <span v-if="scope.row.subject_type === '11'">多选题</span>
              <span v-if="scope.row.subject_type === '12'">判断题</span>
              <span v-if="scope.row.subject_type === '13'">填空题</span>
              <span v-if="scope.row.subject_type === '14'">翻译题</span>
              <span v-if="scope.row.subject_type === '15'">文字排序题</span>
              <span v-if="scope.row.subject_type === '16'">连线题</span>
              <span v-if="scope.row.subject_type === '17'">写作题</span>
              <span v-if="scope.row.subject_type === '18'">口语题</span>
            </template>
          </el-table-column>
          <el-table-column prop="subject_content" label="题目标题" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="subject_content" label="操作" width="80">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" plain @click="handleDelSubject(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="online-dialogCons">
        <div class="online-diglogBox">
          <el-input v-model="keyWord" placeholder="请输入题目标题" style="width: 380px;" @keyup.enter.native="findSubject"></el-input>
          <el-button type="primary" @click="findSubject">搜索</el-button>
        </div>
        <div class="subjects-title">请勾选题目</div>
        <el-table :data="subjects" max-height="350" border style="width: 100%;margin: 10px 0;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40">
          </el-table-column>
          <el-table-column prop="date" label="题目类型" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.subject_type === '10'">单选题</span>
              <span v-if="scope.row.subject_type === '11'">多选题</span>
              <span v-if="scope.row.subject_type === '12'">判断题</span>
              <span v-if="scope.row.subject_type === '13'">填空题</span>
              <span v-if="scope.row.subject_type === '14'">翻译题</span>
              <span v-if="scope.row.subject_type === '15'">文字排序题</span>
              <span v-if="scope.row.subject_type === '16'">连线题</span>
              <span v-if="scope.row.subject_type === '17'">写作题</span>
              <span v-if="scope.row.subject_type === '18'">口语题</span>
            </template>
          </el-table-column>
          <el-table-column prop="subject_content" label="题目标题" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="99" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { findSubject } from '@/api/overall'
import { saveOnlineTest } from '@/api/teacher/onlineCourse'
export default {
  props: ['id'],
  data () {
    return {
      isShow: true,
      ruleForm: {
        testTitle: undefined,
        isLimited: 0,
        limitedTime: undefined,
        answerAnalyseIsOpened: 0
      },
      rules: {
        testTitle: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
        limitedTime: [{ required: true, message: '请输入限时分钟数', trigger: 'blur' }]
      },
      keyWord: '',
      pageNum: 1,
      subjects: [],
      selects: []
    }
  },
  methods: {
    async findSubject () {
      const data = {
        keyWord: this.keyWord,
        pageNum: this.pageNum
      }
      const res = await findSubject(data)
      if (res.code === '200') {
        this.subjects = res.data
      }
    },
    handlePageChange (e) {
      this.pageNum = e
      this.findSubject()
    },
    async saveOnlineTest (data) {
      const res = await saveOnlineTest(data)
      if (res.code === '200') {
        if (res.data.flagCode === '2000') {
          this.$message.success('发布成功')
          // 重新刷新在线课程列表
          this.$emit('handleEmit', 'confirm')
        } else {
          this.$message.error(res.data.returnMessage)
        }
      } else {
        this.$message.error(res.message)
      }
    },
    handleSelectionChange (val) {
      val.forEach(item => {
        if (this.selects.indexOf(item) < 0) {
          this.selects.push(item)
        }
      })
    },
    handleDelSubject (item) {
      this.selects.splice(this.selects.indexOf(item), 1)
    },
    submitForm (ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (valid) {
          if (this.ruleForm.isLimited === 1 && this.ruleForm.limitedTime < 1) {
            this.$message.error('请填写限时分钟数')
            return
          }
          if (this.selects.length < 1) {
            this.$message.error('请选择题目')
            return
          }
          const data = {
            onlineLessonId: this.id,
            testTitle: this.ruleForm.testTitle,
            isLimited: this.ruleForm.isLimited,
            limitedTime: this.ruleForm.limitedTime,
            answerAnalyseIsOpened: this.ruleForm.answerAnalyseIsOpened,
            subjectNum: this.selects.length,
            subjectDataStr: this.selects.map(item => ({
              id: item.subject_id
            }))
          }
          this.saveOnlineTest(data)
        } else {
          return false
        }
      })
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.findSubject()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .subjects-title{
    margin-top: 15px;
    font-weight: bold;
  }
</style>
